<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <title>Intro.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
      crossorigin="anonymous"
    />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />

    <link href="http://localhost:10001/dist/introjs.css" rel="stylesheet" />
    <link href="http://host.docker.internal:10001/dist/introjs.css" rel="stylesheet" />

    <style type="text/css">
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .h1,
      .h2,
      .h3,
      .h4,
      .h5,
      .h6 {
        font-family: "Roboto" !important;
      }
    </style>

    <title>Hello, world!</title>
  </head>
  <body>
    <main>
      <div class="container py-4">
        <header
          id="fixed-parent"
          class="pb-3 mb-4 border-bottom"
          style="position: fixed"
          data-hint="fixed header"
        >
          <a
            id="fixed"
            href="/"
            class="d-flex align-items-center text-dark text-decoration-none"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="40"
              height="32"
              class="me-2"
              viewBox="0 0 118 94"
              role="img"
            >
              <title>Bootstrap</title>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"
                fill="currentColor"
              ></path>
            </svg>
            <span class="fs-4">Jumbotron example</span>
          </a>
        </header>

        <div class="mt-5 p-5 mb-4 bg-light rounded-3">
          <div class="container-fluid py-5" id="main-section">
            <h1 class="display-5 fw-bold" data-intro="first header step">
              Custom jumbotron
            </h1>
            <p class="col-md-8 fs-4" data-intro="second paragraph step">
              Using a series of utilities, you can create this jumbotron, just
              like the one in previous versions of Bootstrap. Check out the
              examples below for how you can remix and restyle it to your
              liking.
            </p>
            <button
              class="btn btn-primary btn-lg"
              type="button"
              id="clickable-button"
              data-hint="a button"
              onclick="window.click()"
              onmouseover="this.innerHTML='Hovered'"
            >
              Example button
            </button>
          </div>
        </div>

        <div class="row align-items-md-stretch">
          <div class="col-md-6">
            <div
              class="h-100 p-5 text-white bg-dark rounded-3"
              id="relative-parent"
              style="position: relative"
            >
              <h2 data-intro="third header step">Change the background</h2>
              <p>
                Swap the background-color utility and add a `.text-*` color
                utility to mix up the jumbotron look. Then, mix and match with
                additional component themes and more.
              </p>
              <button
                class="btn btn-outline-light"
                type="button"
                id="clickable-relative-button"
                onclick="window.clickRelative()"
                onmouseover="this.innerHTML='Hovered Relative'"
              >
                Example button
              </button>
            </div>
          </div>
          <div class="col-md-6">
            <div
              class="h-100 p-5 bg-light border rounded-3"
              id="absolute-parent"
              style="position: absolute"
            >
              <h2 data-intro="fourth header step" data-hint="secondary header">
                Add borders
              </h2>
              <p>
                Or, keep it light and add a border for some added definition to
                the boundaries of your content. Be sure to look under the hood
                at the source HTML here as we've adjusted the alignment and
                sizing of both column's content for equal-height.
              </p>
              <button
                class="btn btn-outline-secondary"
                type="button"
                id="clickable-absolute-button"
                onclick="window.clickAbsolute()"
                onmouseover="this.innerHTML='Hovered Absolute'"
              >
                Example button
              </button>
            </div>
          </div>
        </div>

        <footer
          class="pt-3 mt-4 text-muted border-top"
          data-hint="this is the footer"
        >
          &copy; 2021
        </footer>
      </div>
    </main>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
      crossorigin="anonymous"
    ></script>

    <script type="text/javascript">
      window.click = function () {
        console.log(1);
      };
      window.clickRelative = function () {
        console.log(2);
      };
      window.clickAbsolute = function () {
        console.log(3);
      };
    </script>
    <script type="text/javascript" src="http://localhost:10001/dist/intro.js"></script>
    <script type="text/javascript" src="http://host.docker.internal:10001/dist/intro.js"></script>
  </body>
</html>
